<template>
	<div>
		<a @click="$router.back(-1)" class="btn btn-primary" type="button" style="width: 100px;">返回</a>

		<div class="input-group mb-3" style="margin-top: 10px;">
			<label class="input-group-text" for="basic-addon1">书名</label>
			<input type="text" class="form-control" id="basic-addon1" v-model="book.bookName">
		</div>

		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputGroupSelect01">一级分类</label>
			</div>
			<select @change="changeL2()" v-model="bookCode1" class="custom-select" id="inputGroupSelect01">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL1" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
		</div>

		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputGroupSelect02">二级分类</label>
			</div>
			<select @change="changeL3()" v-model="bookCode2" class="custom-select" id="inputGroupSelect02">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL2" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
		</div>

		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<label class="input-group-text" for="inputGroupSelect03">三级分类</label>
			</div>
			<select v-model="bookCode3" class="custom-select" id="inputGroupSelect03">
				<option selected value="-1">选择类别</option>
				<option v-for="bookClazz in bookL3" :key="bookClazz.classificationId" :value="bookClazz.classCode">
					{{bookClazz.classificationName}}
				</option>
			</select>
		</div>


		<div class="input-group mb-3" style="margin-top: 10px;">
			<label class="input-group-text" for="basic-addon2">作者</label>
			<input type="text" class="form-control" id="basic-addon2" v-model="book.bookAuthor">
		</div>

		<div class="input-group mb-3" style="margin-top: 10px;">
			<label class="input-group-text" for="basic-addon3">库存</label>
			<input type="text" class="form-control" id="basic-addon3" oninput="value=value.replace(/\D/g,'')"
				v-model="book.bookQuantity">
		</div>

		<div class="input-group mb-3" style="margin-top: 10px;">
			<label class="input-group-text" for="basic-addon4">ISBN</label>
			<input type="text" class="form-control" id="basic-addon4" oninput="value=value.replace(/\D/g,'')"
				v-model="book.bookIsbn">
		</div>

		<div class="input-group mb-3" style="margin-top: 10px;">
			<label class="input-group-text" for="basic-addon5">简介</label>
			<textarea style="height: 300px;" type="text" class="form-control" id="basic-addon5" v-model="book.bookText"/>
		</div>

		<div class="form-group">
			<label for="tp" class="control-label">当前封面：</label>
			<img :src="imgPath + book.bookImg" class="img-thumbnail" style="width:200px;height:200px" id="tp">
			<label for="tp" class="control-label">上传封面：</label>
			<img :src="imgPath + filename" class="img-thumbnail" style="width:200px;height:200px" id="tp">
			<input style="margin-top: 10px;" type="file" @change="uploadFile($event)" class="form-control"
				accept="image/png, image/jpeg" />
		</div>

		<div>
			<button style="margin-top: 10px;" class="btn btn-primary" type="button" @click="updateBook()">提交修改</button>
		</div>

	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const route = useRoute();
			const store = useStore();
			store.state.ifFrameShow = false;
			//onMounted()生命周期
			onMounted(() => {
				axios
					.get("QueryL1")
					.then((response) => (data.bookL1 = response.data.data))
					.catch((error) => console.log(error));
				axios
					.post("Admin/QueryBook?id=" +
						route.query.id
					)
					.then((response) => {
						if (response.data.msg === '查询为空') {
							alert('查询为空')
							return
						}
						data.book = response.data.data.book
						data.bookCode1 = response.data.data.classList[0].classCode
						data.bookCode2 = response.data.data.classList[1].classCode
						data.bookCode3 = response.data.data.classList[2].classCode

						data.queryL2(data.bookCode1)
					})
					.catch((error) => console.log(error)); // 请求失败处理

				axios
					.get("Admin")
					.catch((error) => {
						console.log(error)
						if (error.status === 403) {
							alert("权限不足")
							router.push({
								name: 'Main'
							})
						}

					});
				data.now = new Date().getTime()
			});
			const data = reactive({
				imgPath: store.state.imageUrl,
				imgFile: new FormData(),
				filename: 'img0.jpg',
				now: '',
				bookL1: [],
				bookL2: [],
				bookL3: [],
				bookCode1: -1,
				bookCode2: -1,
				bookCode3: -1,
				book: {
					bookClassificationId: '',
					bookClassCode: '',
					bookClassName: '',
					bookQuantity: 0,
					bookName: '',
					bookAuthor: '',
					bookText: '',
					bookIsbn: '',
					bookImg: 'img0.jpg'
				},
				updateBook: () => {
					if (data.book.bookQuantity === '' || data.book.bookName === '' || data.book.bookAuthor ===
						'' || data.book.bookText === '' || data.book.bookIsbn === '') {
						alert("请输入完整信息")
						return
					}
					if (data.bookCode1 != -1) {
						data.book.bookClassCode = data.bookCode1
					}
					if (data.bookCode2 != -1) {
						data.book.bookClassCode = data.bookCode2
					}
					if (data.bookCode3 != -1) {
						data.book.bookClassCode = data.bookCode3
					}

					if (!data.imgFile.has('book')) {
						data.imgFile.append('book', JSON.stringify(data.book));

					}
					axios
						.post("Admin/UpdateBook", data.imgFile)
						.then((response) => {
							alert(response.data.msg)
							data.book = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理

					// axios
					// 	.post("Admin/AddBookImg", data.imgFile)
					// 	.then((response) => {

					// 	})
					// 	.catch((error) => console.log(error)); // 请求失败处理
				},
				uploadFile: (event) => {
					let file = event.target.files[0]; //获取input的图片file值
					let formData = new FormData(); // 创建form对象
					formData.append('myFile', file); //对应后台接收图片名
					axios.post('Admin/Upload', formData)
						.then(response => {
							data.filename = response.data.data + '?now=' + new Date().getTime()
							data.imgFile = formData
						})
						.catch(error => console.log(error)); // 请求失败处理
				},
				/////////////////////////////////////////////////////////
				queryL2: (s) => {
					axios
						.get("QueryL2", {
							params: {
								L1: s
							}
						})
						.then((response) => {
							data.bookL2 = response.data.data
							data.queryL3(data.bookCode2)
						})
						.catch((error) => console.log(error));
				},

				queryL3: (s) => {
					axios
						.get("QueryL3", {
							params: {
								L2: s
							}
						})
						.then((response) => (data.bookL3 = response.data.data))
						.catch((error) => console.log(error));
				},

				///////////////////////////////////////////////////////
				// 二级分类
				changeL2: () => {
					axios
						.get("QueryL2", {
							params: {
								L1: data.bookCode1
							}
						})
						.then((response) => {
							data.bookCode2 = -1
							data.bookCode3 = -1
							data.bookL2 = response.data.data
						})
						.catch((error) => console.log(error));
				},
				// 三级分类
				changeL3: () => {
					axios
						.get("QueryL3", {
							params: {
								L2: data.bookCode2
							}
						})
						.then((response) => {
							data.bookCode3 = -1
							data.bookL3 = response.data.data
						})
						.catch((error) => console.log(error));
				},
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>

</style>
